<template>
  <div class="fl w950">
    <div class="clearfix comm_bd mb10 center_info">
      <div class="center_tt clearfix">
        <span class="fl perinfo current">个人信息</span>
        <span class="fl contact">联系方式</span>
      </div>
      <div class="clearfix comm_bd">
        <div class="clearfix basic_tab">
          <a class="current borl">基本资料<span class="line"></span></a>
          <a id="picture">头像照片<span class="line"></span></a>
        </div>
        <div class="basic_con">
          <div class="basicinfo">
            <form>
              <div class="basicct">
                <p class="title">
                  亲爱的&nbsp;<strong>
                    <b>{{ l.username }}</b></strong
                  >&nbsp;，填写真实的资料，享有优惠更便捷。
                </p>
                <div class="headimg clearfix">
                  <span class="lal fl">当前头像：</span>
                  <span id="face_img" class="fl face_img">
                    <img :src="giao"/>
                    <div class="face_hover_box" style="display: none"></div>
                    <a
                      id="edit_img"
                      href="#"
                      target="_blank"
                      style="display: none"
                      >编辑头像</a
                    >
                  </span>
                </div>
                <div class="recommend clearfix">
                  <input type="hidden" name="sIcon" onclick= 'dfg'/>
                  <ul>
                    <li active-class="opa">推荐头像：</li>
                    <li
                      @click="opalk(item)"
                      v-for="(item, index) in fop"
                      :key="index"
                    >
                      <img
                        :src="item.iRu"
                        width="50"
                        height="50"
                        alt="推荐头像"
                      />
                    </li>
                  </ul>
                </div>
                <div class="name clearfix">
                  <label class="fl"
                    >昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</label
                  >
                  <input type="text" name="sName" v-model="l.nickname" />
                </div>
                <div class="sex clearfix">
                  <label class="fl"
                    >性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label
                  >
                  <label class="fl">{{ l.sex }}</label>
                </div>
                <div id="birth" class="clearfix birthday">
                  <div class="clearfix">
                    <label class="fl"
                      >生&nbsp;日：</label
                    >
                    <div class="selectbox fl">
                      <select id="birthyear" v-model="yarn1" name="birthyear">
                        <option value="">请选择年份</option>
                        <option v-for="(item, index) in yarn" :key="index">
                          {{ item }}
                        </option>
                      </select>
                    </div>
                    <div class="selectbox fl">
                      <select
                        id="birthmonth"
                        v-model="month1"
                        name="birthmonth"
                      >
                        <option value="请选择月份">请选择月份</option>
                        <option v-for="(item, index) in month" :key="index">
                          {{ item }}
                        </option>
                      </select>
                    </div>
                    <div class="selectbox fl">
                      <select id="birthday" v-model="day1" name="birthday">
                        <option value="请选择日份">请选择日份</option>
                        <option v-for="(item2, index2) in day" :key="index2">
                          {{ item2 }}
                        </option>
                      </select>
                    </div>
                  </div>
                  <p>*您的生日当天享有惊喜哦</p>
                </div>
                <div class="clearfix birthday">
                  <label class="fl"
                    >星&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;座：</label
                  >
                  <div id="constellation" class="selectbox fl">
                    {{ xingZuo }}
                  </div>
                </div>
                <div id="region" class="clearfix birthday">
                  <div class="clearfix">
                    <label class="fl">居&nbsp;&nbsp;住&nbsp;地：</label>
                    <el-cascader
                      size="large"
                      :options="options"
                      v-model="selectedOptions"
                      @change="handleChange"
                    >
                    </el-cascader>
                  </div>
                </div>
                <div>
                  <a
                    id="basicinfoSave"
                    class="comm_btn mid_btn resetsave"
                    @click="qwop"
                    >保存</a
                  >
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryMultipart, queryInfo, queryAvatar } from '@/api/goods'
import { regionData } from 'element-china-area-data'
export default {
  name: 'Rwu16',
  data () {
    return {
      // 选择图片
      fop: [
        { iRu: 'https://shp.qlogo.cn/daoju/9999/9999_1/0' },
        { iRu: 'https://shp.qlogo.cn/daoju/9999/9999_2/0' },
        { iRu: 'https://shp.qlogo.cn/daoju/9999/9999_3/0' },
        { iRu: 'https://shp.qlogo.cn/daoju/9999/9999_4/0' }
      ],
      // 用户名
      v: '森哞暧光',
      giao: '//ossweb-img.qq.com/images/gameshop/aba/images/thumb_sPackageGoodsPic18817/touxiang_20210203.jpg',
      // 年
      yarn: [
        2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011,
        2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022
      ],
      axs: '',
      yarn1: '',
      month: ['01', '02', '03', '04', '05', '06', '07', '08', '09', 10, 11, 12],
      month1: '',
      day1: '',
      day: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
      l: {},
      options: regionData,
      selectedOptions: [],
      addressArr: [],
      xingZuo: ''
    }
    // git add .
    // git commit -m
    // git push

    // git pull
  },
  mounted () {
    this.queryMultipart()
  },
  methods: {
    opalk (a) {
      this.giao = a.iRu
    },
    selectedFile (e) {
      console.log(e.files[0])
    },
    async queryMultipart () {
      const res = await queryMultipart()
      this.yarn1 = res[0].yarn
      this.month1 = res[0].month
      this.day1 = res[0].day
      this.nickname = res[0].nickname
      this.l = res[0]
      this.giao = res[0].avatar
      // eslint-disable-next-line no-eval
      this.selectedOptions = res[0].region.split(' ')
    },
    // 保存数据
    async qwop () {
      await queryInfo(this.yarn1, this.month1, this.day1, { nickname: this.l.nickname, constellation: this.xingZuo, avatar: this.avatar, region: this.selectedOptions.join(' ') })
      this.queryMultipart()
      alert('保存信息成功')
    },
    handleChange (value) {
      console.log(value)
      console.log(this.selectedOptions)
      // this.selectedOptions = value
    },
    async ropa () {
      const res = await queryAvatar()
      console.log(res)
    }
  },
  // 判断星座
  watch: {
    month1 (a) {
      this.xingZuo = '魔羯水瓶双鱼牡羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯'.substr(this.month1 * 2 - (this.day1 < '102223444433'.charAt(this.month1 - 1) - -19) * 2, 2)
    },
    day1 (a) {
      this.xingZuo = '魔羯水瓶双鱼牡羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯'.substr(this.month1 * 2 - (this.day1 < '102223444433'.charAt(this.month1 - 1) - -19) * 2, 2)
    }
  }
}
</script>

<style lang="scss" scoped>
.w950 {
  width: 950px;
  .opa {
    color: red;
  }
  .comm_bd {
    border: 1px solid #e6e9ef;
    background: #fff;
  }
  .comm_btn {
    display: inline-block;
    background: #f74a4a;
    color: #fff;
    border-bottom: 2px solid #e43333;
    text-align: center;
    cursor: pointer;
  }
  .center_info {
    padding: 15px 30px;
    .resetsave {
      height: 39px;
      line-height: 39px;
      width: 172px;
      margin-left: 65px;
    }
    .birthday {
      margin: 20px 0;
      .selectbox {
        position: relative;
        margin-left: 10px;
        width: 99px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #e6e9ef;
      }
      p {
        margin-left: 65px;
        color: #666;
        margin-top: 5px;
      }
      .selectbox {
        position: relative;
        margin-left: 10px;
        width: 99px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #e6e9ef;
      }
      select {
        position: relative;
        width: 99px;
        height: 20px;
        border: none;
      }
    }
    .sex label {
      height: 27px;
      line-height: 27px;
      display: block;
      text-align: right;
    }
    .name {
      margin: 20px 0 25px 0;
      label {
        height: 27px;
        line-height: 27px;
        display: block;
        text-align: right;
      }
      input {
        width: 165px;
        height: 27px;
        margin-left: 12px;
        outline: none;
      }
    }
    ul {
      list-style: none;
      li {
        float: left;
        display: block;
        height: 50px;
        line-height: 50px;
        width: 65px;
        img {
          border-radius: 25px;
          border: 2px solid #fff;
          cursor: pointer;
        }
      }
    }
    .face_img {
      position: relative;
      width: 100px;
      height: 119px;
      overflow: hidden;
      img {
        width: 100px;
        height: 100px;
        display: block;
        border-radius: 50px;
        background: #ccc;
        cursor: pointer;
      }
      .mml {
        position: absolute;
        top: 41px;
        left: 19px;
      }
    }
    .basicct {
      width: 800px;
      height: 520px;
      margin: 15px 0 0 20px;
      .headimg {
        margin: 20px 0;
      }
      .lal {
        display: block;
        width: 60px;
        height: 100px;
        line-height: 100px;
        padding-right: 5px;
      }
      .title strong {
        font-weight: normal;
        color: #f74a4a;
      }
    }
    .basicinfo {
      width: 886px;
      height: 555px;
      border-top: 1px solid #e6e9ef;
    }
    .basic_tab a {
      position: relative;
      float: left;
      width: 96px;
      height: 34px;
      font-size: 14px;
      line-height: 34px;
      text-align: center;
      border-right: 1px solid #e6e9ef;
    }
    .current .line {
      position: absolute;
      bottom: -3px;
      left: 0;
      display: block;
      width: 96px;
      height: 6px;
      background: #fff;
    }
    .center_tt {
      border-bottom: 1px solid #e6e9ef;
      height: 28px;
      line-height: 28px;
      span.current {
        border-bottom: 1px solid #f74a4a;
      }
    }
    .fl {
      float: left;
    }
    .center_tt {
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      span {
        height: 28px;
        line-height: 28px;
        display: block;
        width: 70px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
  .comm_bd {
    border: 1px solid #e6e9ef;
    background: #fff;
  }
  .mb10 {
    margin-bottom: 10px;
  }
}
.fl {
  float: left;
}
</style>
